<template>
  <NewCard>
    <div class="detail_main">
      <h2>
        <b>{{ getType(collectDetail.esType) }}</b
        >{{ collectDetail.title }}
      </h2>
      <div class="detail_content">
        <div class="detail_date">
          <ul v-if="collectDetail.esType == '1'">
            <li>发布部门：{{ collectDetail.from }}</li>
            <li>适用区域：{{ collectDetail.scope }}</li>
            <li>发布日期：{{ collectDetail.publishTime }}</li>
            <li>效力级别：{{ currentRank }}</li>
            <li>时效性：{{ currentState }}</li>
            <li>生效日期：{{ collectDetail.effectiveTime }}</li>
          </ul>
          <p v-else>
            {{ collectDetail.from }} ·
            {{
              collectDetail.createTime &&
              collectDetail.createTime.substring(0, 10)
            }}
          </p>
        </div>

        <p class="issue" v-if="collectDetail.esType == 2">
          {{ collectDetail.title }}
        </p>
        <div class="detail_txt">
          <p
            v-for="item in collectDetail.esType != 2
              ? collectDetail.info
              : collectDetail.answer"
            :key="item.id"
          >
            {{ getContent(item.content) }}
          </p>
        </div>
        <div v-show="collectDetail.id" class="detail_label">
          <el-tag v-for="(labelItem, index) in hotLabelList" :key="index">{{
            labelItem
          }}</el-tag>
          <el-button
            size="mini"
            class="label_more"
            @click="moreHotLabel"
            v-show="hotLabelMove"
          >
            更多<i class="el-icon-caret-bottom"></i>
          </el-button>
        </div>

      </div>
    </div>
    <div class="ribbon_content">
      <Ribbon :detail="collectObj" :listActive="collectDetail.esType"></Ribbon>
    </div>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import Ribbon from "@/components/Ribbon/ribbon.vue";

export default {
  props: {
    collectDetail: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      hotLabelNum: 8, //热门标签展示的数量
      hotLabelList: [], //全部热门标签
      hotLabelMove: true, //热门标签按钮显示隐藏

      collectObj: {
        title: "",
        from: "",
        createTime: "",
        id: "",
      },
    };
  },
  computed: {
    //   连接数组
    getContent() {
      return (content) => {
        if (Array.isArray(content)) {
          return content.join();
        } else {
          return content;
        }
      };
    },
    // 转换类型
    getType() {
      return (type) => {
        // 1 法律 2 问答 3 头条 4 合同 5 咨询
        if (type == 1) {
          return "法律";
        } else if (type == 2) {
          return "问答";
        } else if (type == 3) {
          return "政策";
        } else if (type == 4) {
          return "合同";
        } else if (type == 5) {
          return "咨询";
        }
      };
    },

    // 计算法律的效力级别：1法律 2宪法 3司法解释 4行政法规 5监察法规 6决定 7地方性法规 8地方规章 9部门规章 10规范性文件 11 行业规范 12行业标准
    currentRank() {
      switch (this.collectDetail.type) {
        case "1":
          return "法律";
        case "2":
          return "宪法";
        case "3":
          return "司法解释";
        case "4":
          return "行政法规";
        case "5":
          return "监察法规";
        case "6":
          return "决定";
        case "7":
          return "地方性法规";
        case "8":
          return "地方规章";
        case "9":
          return "部门规章";
        case "10":
          return "规范性文件";
        case "11":
          return "行业规范";
        case "12":
          return "行业标准";
      }
    },
    // 法条生效状态 1 有效 2 失效 3 未生效 5 修改 9 已废止
    currentState() {
      switch (this.collectDetail.effectiveStatus) {
        case 1:
          return "现行有效";
        case 2:
          return "已失效";
        case 3:
          return "未生效";
        case 5:
          return "修改";
        case 9:
          return "已废止";
      }
    },
  },
  watch: {
    collectDetail: {
      handler(newVal) {
        this.collectObj = newVal;
        this.hotLabelList = newVal?.labels?.slice(0, 8);
        // console.log(this.collectObj, "改定值");
        this.hotLabelMove = true;
        this.hotLabelNum = 8;
      },
      deep: true,
    },
  },
  methods: {
    //点击热门关键词获取更多标签
    moreHotLabel() {
      console.log(1);
      this.hotLabelNum = this.hotLabelNum + 8;

      if (this.hotLabelNum > this.collectDetail.labels.length) {
        this.hotLabelList = this.collectDetail.labels;
        this.hotLabelMove = false;
      } else {
        this.hotLabelList = this.collectDetail.labels.slice(
          0,
          this.hotLabelNum
        );
      }
    },
  },
  name: "detailPage",
  components: { NewCard, Ribbon },
};
</script>

<style scoped>
::v-deep .el-card__body > .top{
    display: none;
}
::v-deep .el-card__body > div {
  height: 100% !important;
  overflow-y: inherit !important;
  position: relative;
}

/* 标题 */
.detail_main {
  height: 100%;
}
.detail_main h2 {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #efefef;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.detail_main h2 > b {
  display: inline-block;
  background-color: #747474;
  color: #fff;
  font-size: 16px;
  text-align: center;
  font-weight: 400;
  padding: 0 15px;
  line-height: 30px;
  border-radius: 15px;
  margin-right: 16px;
}

/* 时间 */
.detail_date {
  margin: 0;
  line-height: 18px;
  font-size: 12px;
  color: #bbb;
  /* margin-bottom: 30px; */
}
.label_more {
  display: block;
  background-color: transparent;
  border: 0;
  margin: 0 auto;
  color: #b9b9b9;
  flex-basis: 100%;
}

/* 内容区 */
.detail_content {
  height: 86%;
  overflow-y: auto;
  overflow-x: initial;
}
/* 来源 */
.detail_source ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  padding: 10px 20px;
  margin: 0;
  background: #f4f5f8;
  border-radius: 8px;
  color: #656669;
  font-size: 14px;
}
.detail_source ul > li {
  width: 33%;
  line-height: 24px;
}

.detail_txt {
  font-size: 14px;
  line-height: 26px;
  color: #333;
}

.detail_date ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  padding: 10px 20px;
  margin: 0;
  background: #f4f5f8;
  border-radius: 8px;
  color: #656669;
  font-size: 12px;
}
.detail_date ul > li {
  width: 28%;
  line-height: 24px;
}
.detail_date ul > li:nth-child(1) {
  width: 44%;
}
.detail_date ul > li:nth-child(4) {
  width: 44%;
}

/* 附件 */
.accessory {
  margin-top: 40px;
}
.accessory ul {
  padding: 0;
}
.accessory ul > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
  border: 1px solid #efefef;
  border-radius: 8px;
}
.accessory ul > li svg {
  cursor: pointer;
  font-size: 20px;
}

/* 标签 */
.detail_label {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  margin-bottom: 100px;
}
.detail_label .el-tag {
  width: 11%;
  color: #999;
  padding: 0;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 15px;
  line-height: 26px;
  background-color: #fff;
  margin-right: 1.71%;
  margin-bottom: 10px;
}
.detail_label .el-tag:nth-child(8n) {
  margin-right: 0;
}

/* 功能区 */
.ribbon_content {
  position: absolute;
  left: -30px;
  bottom: -20px;
  width: calc(100% + 60px);
  background-color: #fff;
  border-top: 1px solid #ecedf0;
}
.issue {
  height: 48px;
  background: #f4f5f8;
  border-radius: 4px;
  line-height: 48px;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #818ca0;
  padding-left: 20px;
}
::v-deep .ribbon_content {
  bottom: -2px;
}
</style>
